import React from 'react'
// import Cropper from "../../component/react-cropper/react-cropper.js"
import Cropper from "react-cropper"
import 'cropperjs/dist/cropper.css'
import './modify-avatar.less'
import API from 'asha/libs/api.js'

class ModifyAvatar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            imgsrc:"",
            defaultImageStyle:{display:"block"},
            cropResult: null,
        };
        this.cropImage = this.cropImage.bind(this);
        this.onChange = this.onChange.bind(this);
    }
    onChange(e) {
        e.preventDefault();
        this.setState({
            defaultImageStyle:{display:"none"}
        })
        let files;
        if (e.dataTransfer) {
            files = e.dataTransfer.files;
        } else if (e.target) {
            files = e.target.files;
        }
        const reader = new FileReader();
        reader.onload = () => {
            this.setState({ src: reader.result });
        };
        reader.readAsDataURL(files[0]);
    }
    cropImage() {
        if (typeof this.cropper.getCroppedCanvas() === 'undefined') {
            return;
        }
        if(this.cropper.getCroppedCanvas()) {
            var result = this.cropper.getCroppedCanvas().toDataURL()
            this.setState({
                cropResult: result,
            });
            return result
        }else{
            return "";
        }
    }
    autoChange() {
        if(this.props.autoChange){
            this.props.autoChange()
        }
    }
    render() {
        return <div className="modify-avatar">
            <div className="ma-container clearfix">
                {
                    this.props.defaultImage?
                    <img className="defaultImage" src={this.props.defaultImage} alt="默认图片" style={this.state.defaultImageStyle}/>
                    :<span className="site-text" style={this.state.defaultImageStyle}>还未上传图片</span>
                }
                <div className="img-upload">
                    <Cropper
                        style={{ height: 200, width: 300 , background:'#f8f8f8'}}
                        aspectRatio={1 / 1}
                        preview=".img-preview"
                        guides={false}
                        src={this.state.src}
                        ref={cropper => { this.cropper = cropper; }}
                    />
                    <p className="tips">{this.props.tips}</p>
                    {this.props.autoChange?<label className="auto-change" onClick={this.autoChange.bind(this)}>换一换</label>:null}
                    <span className="filereset">上传图片<input type="file" className="upload-btn" onChange={this.onChange}/></span>
                </div>
            </div>
        </div>
    }
}

export default ModifyAvatar

ModifyAvatar.defaultProps={
    autoChange:false,
    tips:"*仅支持JPG、GIF、PNG且文件小于2M，图片尺寸请大于200×200",
}

// //备用:预览功能
// <img className="img-preview" src=""/>
// <div className="ma-right clearfix">
//     <div className="img-c">
//          <img src={this.state.cropResult} alt="80x80" />
//     </div>
// </div>
// <div className="ma-bottom">
//     <input className="preserve" type="button" value="保存" onClick={this.cropImage}/>
//     <input className="cancel"type="button" value="取消"/>
// </div>